<!-- 新增、编辑 -->

<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="50%"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="平台银行账号" :label-width="formLabelWidth" prop="sys_card_ids">
                <el-select v-model="dialogForm.sys_card_ids" multiple placeholder="平台银行账号" style="width:100%;">
                    <el-option-group
                        v-for="group in sysCardsGroupData"
                        :key="group.company_name"
                        :label="'主体：' + group.company_name"
                        >
                        <el-option
                            v-for="item in group.options"
                            :key="item.id"
                            :label="item.name + '（' + item.card_type_name + '）'"
                            :value="item.id"
                            />
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="商户" :label-width="formLabelWidth" prop="merchant_id">
                <el-select
                    v-model="dialogForm.merchant_id"
                    filterable
                    remote
                    reserve-keyword
                    remote-show-suffix
                    placeholder="输入商户名称关键字搜索"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    style="width:100%;"
                    >
                    <el-option
                        v-for="item in merOptions"
                        :key="item.merchant_id"
                        :label="item.name"
                        :value="item.merchant_id"
                        />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.remark" type="textarea" rows="3" />
            </el-form-item>
            <el-form-item label="是否可用" :label-width="formLabelWidth" prop="is_active">
                <el-select v-model="dialogForm.is_active" placeholder="是否可用">
                    <el-option label="可用" :value="1"></el-option>
                    <el-option label="不可用" :value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { merchantSelectApi } from "@/api/payServerse/merchant";

const listData = ref([]);
const merOptions = ref([]);
const loading = ref(false);
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            sys_card_ids: "",
            merchant_id: "",
            remark: "",
            is_active: ""
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    sysCardsGroupData: {type: Array, default: []},
    merchantSelectData: {type: Array, default: []}
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "140px";
// 校验
const rules = {
    sys_card_ids: [{ required: true, message: "请选择充值银行账号", trigger: "blur" }],
    merchant_id: [{ required: true, message: "请输入商户ID", trigger: "blur" }],
};

const remoteMethod = (query) => {
    if (query) {
        loading.value = true;
        setTimeout(() => {
            loading.value = false
            merOptions.value = listData.value.filter((item) => {
                return item.name.toLowerCase().includes(query.toLowerCase());
            })
        }, 200)
    } else {
        merOptions.value = [];
    }
}
// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            const param = Object.assign({}, {
                id: dialogForm.id,
                merchant_id: dialogForm.merchant_id,
                remark: dialogForm.remark,
                is_active: dialogForm.is_active,
                sys_card_ids: dialogForm.sys_card_ids
            });
            try {
                emits("submitForm", param);
            } catch (error) {
               return false;
            }
        })
        .catch(error => {
            return false;
        });
};
// 获取系统卡列表
const getMerchantSelectData = async () => {
    loading.value = true;
    try {
        const res = await merchantSelectApi({});
        listData.value = res.data;
    } catch (error) {
        loading.value = false;
    }
};
onMounted(() => {
    getMerchantSelectData();
});
</script>
  